<template>
	<view class="outer_box" :style="{height:height+'px'}">
		<image class="box_img" :src="goodInfo.logo" mode="aspectFill"></image>
		<view class="box_intro">
			<view class="box_intro_top">
				<view class="price">
					￥{{goodInfo.price}}
				</view>
				<view class="inventory">
					库存：{{goodInfo.inventory}}
				</view>
			</view>
			<view class="box_intro_bot">
				{{goodInfo.name}}
			</view>
		</view>
		<!-- <view class="box_specification">
			<view class="left">
				<view class="">规格</view>
				<view class="" @tap="open">已选择1000g</view>
			</view>
			<view class="icon">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="box_adress">
			<view class="adress_left">
				发货
			</view>
			<view class="adress_right" @tap="jumpaddress">
				<view class="dizhi">
					<view class="">{{shopInfo.province}}{{shopInfo.city}} |  快递:免运费</view>
					<view class="icon">
						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="select_sizhi" v-if="activeType==2">
					配送至：{{address.province}} {{address.city}} {{address.district}}
				</view>
				<view class="select_sizhi" v-if="activeType==1">
					还没有添加收货地址，请前往添加
				</view>
			</view>
		</view>
		<view class="box_shop">
			<view class="box_shop_left">
				<image :src="shopInfo.shopLogo" mode=""></image>
				<view class="decorate">
					<view class="">
						{{shopInfo.shopName}}
					</view>
					<view class="">
						{{shopInfo.shopLabel}}
					</view>
				</view>
			</view>
			<view class="box_shop_right" @tap="Jumpshop">
				<view class="">
					进入店铺
				</view>
				<view class="icon">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 详情分界线 -->
		<view class="box_content">
			<view class="title">
				<view class="line"></view>
				<view class="mx-2">图文详情</view>
				<view class="line"></view>
			</view>
		</view>
		<view class="bot_btn">
			<view class="phone" @tap="call">
				<image class="bot_Img" src="../../static/lipdee/zx@2x.png" mode=""></image>
				<view class="">
					咨询
				</view>
			</view>
			<view class="shop" @tap="Jumpshop">
				<image class="bot_Img" src="../../static/lipdee/xxmd@2x.png" mode=""></image>
				<view class="">
					店铺
				</view>
			</view>
			<view class="cart" @tap="addSubtractProduct(1,goodInfo)">
				加入购物车
			</view>
			<view class="buy" @tap="pay">
				立即购买
			</view>
		</view>
		<wybpopup ref="popup" type='bottom'>
			<view class="popup">
				<view class="popup_top item">
					<view class="">
						相伴测试专用商家
					</view>
					<view class="">
						￥ {{goodInfo.price}}
					</view>
				</view>
				<view class="popup_top">
					<view class="">
						支付方式
					</view>
					<view class="">
						会员余额：{{userInfo.userInfo.money}}
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="popup_pay">
					<!-- <view class="pay_c"> -->
						<view class="">
							需付款
						</view>
						<view class="">
							￥{{goodInfo.price}}
						</view>
					<!-- </view> -->
				</view>
				<button class="paymentBtn" type="default" @tap='payment1()'>
					支付
				</button>
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				height:500,
				goodInfo:'',
				shopInfo:'',
				address:'',
				activeType:1,
				isDispatching:''
			}
		},
		computed: mapState(['userInfo','loginState']),
		onLoad(option) {
			this.isDispatching = option.isDispatching
			this.getGoodsInfo(option.goodsId)
		},
		onShow() {
			console.log(this.loginState)
			if(this.loginState){
				this.getAddressList()
			}
			
			this.getUserInfo()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(0)
				}
			})
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo.uid != null) {
						this.setUserInfo(userInfo)
					}else{
						this.logout()
					}
			
				})
			
			},
			call() {
				uni.makePhoneCall({
				phoneNumber: this.shopInfo.phone //仅为示例
				});
			},
			payment1(){
				const parameter = {
					ids: [],
					dispatching: [], //数据传输使用 不参与后端交互
					isDispatching: '',
					shop: [],
					orderType:1,
				}
				parameter.ids.push(this.goodInfo.goodsId);
				parameter.dispatching.push(this.isDispatching);
				parameter.shop.push(this.shopInfo.shopId);
					
				let type=3
				parameter.isDispatching = -1
				this.$api.subOrder(parameter).then((res) => {
					// uni.hideLoading()
					console.log(JSON.stringify("0099999" + res))
					if (res.data.code == 200) {
						//订单提交成功 开始支付
						const parameter = {
							"orderNo": res.data.data.orderNumber
						}
						this.payOrder(parameter,type)
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 1000,
							icon: "none"
						});
					}
				})
			},
			uniq(array) {
				var temp = []; //一个新的临时数组
				for (var i = 0; i < array.length; i++) {
					if (temp.indexOf(array[i]) == -1) {
						temp.push(array[i]);
					}
				}
				return temp;
			},
			//订单支付
			payOrder(parameter,type) {
				parameter.type=type
				this.$api.payOrder(parameter).then((res) => {
					// this.price = 0
					if(type==3){ //余额支付
						if (res.data.code == 200) {
							uni.showToast({
								title: '支付成功',
								duration: 1500,
								icon: "none"
							});
							this.close()
						
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							this.close()
							setTimeout(function() {
								uni.navigateTo({
									url: '../member/toUp',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
						
							}, 1000);
						}
						
					}
			
					
				})
			
			},
			//立即购买
			pay(){
				if(this.userInfo.userInfo.flag == 3){//是会员
					let _this = this
					if (this.isDispatching == -1) {//服务型  直接支付
						_this.open()
						// uni.hideTabBar(); 
					}
					if (this.isDispatching == 2) {//产品型 跳页面支付

					const parameter = {
						ids: [],
					}
					parameter.ids.push(this.goodInfo.goodsId)
						uni.navigateTo({
							url: '../order/affirmOrder?shopId=' + this.shopInfo.shopId + '&goodsIds=' +
								JSON.stringify(parameter.ids)+'&type='+1
						});
					
					} 
				}else if(this.userInfo.userInfo.flag == 1){//未开通会员
					uni.showModal({
							title: '提示',
							content: '您现在还未开通会员，请前往开通会员',
							success: (res)=> {
							if (res.confirm) {
								uni.navigateTo({
									url:'../member/openMember'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								}
						 }
					});
				}else if(this.userInfo.userInfo.flag == 2){//会员过期
					uni.showModal({
							title: '提示',
							content: '会员已过期，请前往充值',
							success: (res)=> {
							if (res.confirm) {
								uni.navigateTo({
									url:'../member/toUp'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								}
						 }
					});
				}
				
			},
			//购物车添加
			 async addSubtractProduct(status, product) { //goodsId
				 await this.$api.addSubtractProduct({
					goodsId: product.goodsId,
					status: status
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: '已添加至购物车',
							duration: 1000,
							icon: "none"
						});
						// this.getfrontPage(this.category)
						// this.calculateNumberById(product.goodsId,status)
						// //刷新购物车
						// this.pupUpList()
						
					}else{
						if(res.data.code !=20001 || res.data.code != 20002){
							uni.showToast({
								title: res.data.message,
								duration: 1000,
								icon: "none"
							});
						}
						// uni.showToast({
						// 	title: res.data.msg,
						// 	duration: 1000,
						// 	icon: "none"
						// });	
					}
			
				})
			
			},
			//进入店铺
			Jumpshop(){
				uni.navigateTo({
					url:'../shop/shopInfo?shopId='+this.shopInfo.shopId
				})
			},
			jumpaddress(){
				uni.navigateTo({
					url:'../address/addressList'
				})
			},
			getAddressList() {
				let _this = this
				this.$api.getAddressList({}).then((res) => {
					if (res.data.code == 200) {
						_this.addressList = res.data.data
						if (_this.addressList.length > 0) {
							_this.address = _this.addressList[0]
							if (_this.address != '') {
								_this.activeType = 2
							}
						} else {
							_this.activeType = 1
						}
					}
				})
			},
			getGoodsInfo(goodsId){
				this.$api.getGoodsInfo({
					goodsId:goodsId
				}).then((res) => {
					this.goodInfo = res.data.dataMap
					this.shopInf()
					console.log(res)
				})
			},
			shopInf(){
				this.$api.shopInfo({
					shopId:this.goodInfo.shopId
				}).then((res) => {
					this.shopInfo = res.data.data
					
					console.log(res)
				})
			},
			open() {
				this.$refs.popup.show()
			},
			close() {
				this.$refs.popup.hide()
			},
		}
	}
</script>

<style lang="less" scoped>
	.mx-2{
		color: #666666;
	}
	.popup{
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
		z-index: 9999;
		.popup_top{
			width: 690rpx;
			height: 70rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}
		.popup_pay{
			width: 750rpx;
			height: 300rpx;
			text-align: center;
			view:nth-child(1){
				margin-top: 100rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
			}
			view:nth-child(2){
				font-size: 56rpx;
				font-weight: 400;
				color: #FF8308;
			}
		}
		.item{
			margin-top: 30rpx;
		}
		.line{
			width: 670rpx;
			height: 2rpx;
			background: #EEEEEE;
			border-radius: 1rpx;
			margin-top: 30rpx;
		}
		.paymentBtn{
			background-color: #FF8308 ;
			width: 520rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 45rpx;
		}
	}
	.icon {
		display: flex;
		align-items: center;
		image {
			width: 15rpx;
		}
	}
	.outer_box{
		background-color: #F8f8f8;
		.box_img{
			width: 750rpx;
			height: 420rpx;
			// border:1px solid red;
		}
		.box_intro{
			width: 690rpx;
			height: 133rpx;
			padding: 10rpx 30rpx 20rpx 30rpx;
			background-color: #ffffff;
			.box_intro_top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price{
					font-size: 48rpx;
					font-weight: bold;
					color: #FF8308;
				}
				.inventory{
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			.box_intro_bot{
				margin-top: 10rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
		}
		.box_specification{
			margin-top: 20rpx;
			width: 690rpx;
			height: 83rpx;
			padding: 10rpx 30rpx 20rpx 30rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			
			.left{
				display: flex;
				align-items: center;
				view:nth-child(1){
					font-size: 32rpx;
					font-weight: 400;
					color: #999999;
				}
				view:nth-child(2){
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					margin-left: 30rpx;
				}
			}
		}
		.box_adress{
			margin-top: 20rpx;
			width: 690rpx;
			height: 100rpx;
			padding: 20rpx 30rpx 20rpx 30rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			.adress_left{
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
			}
			.adress_right{
				width: 600rpx;
				.dizhi{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.select_sizhi{
					margin-top: 10rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		
	}
	.box_shop{
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		padding: 20rpx 30rpx 20rpx 30rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		.box_shop_left{
			display: flex;
			align-items: center;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}
			.decorate{
				margin-left: 25rpx;
				view:nth-child(1){
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
				view:nth-child(2){
					margin-top: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.box_shop_right{
			display: flex;
			align-items: center;
			view:nth-child(1){
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}
	.bot_btn{
		position: fixed;
		bottom:0;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
		display: flex;
		align-items: center;
		.bot_Img{
			width: 48rpx;
			height: 48rpx;
		}
		.phone{
			margin-left: 30rpx;
			width: 100rpx;
			line-height: 35rpx;
			text-align: center;
			view{
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}
		}
		.shop{
			width: 100rpx;
			line-height: 35rpx;
			text-align: center;
			view{
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}
		}
		.cart{
			width: 240rpx;
			height: 90rpx;
			background: #FFBD66;
			border-radius: 45rpx 0rpx 0rpx 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			margin-left: 20rpx;
			}
		.buy{
			width: 240rpx;
			height: 90rpx;
			background: #FF5F3F;
			border-radius: 0px 45px 45px 0px;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
		}
	}
	.box_content{
		margin-top: 20rpx;
		width: 690rpx;
		min-height: 100rpx;
		padding: 20rpx 30rpx 20rpx 30rpx;
		background-color: #ffffff;
		.title{
			display: flex;
			align-items: center;
			justify-content: center;
			.line {
							width: 100rpx;
							background-color: #CCCCCC;
							height: 1px;
							border-radius: 10rpx;
						}
		}
	}
	
</style>
